import React from 'react';
import {Row, Col, Icon, Tabs, DatePicker, Progress, List, Avatar} from 'antd';
import echarts from 'echarts';
import moment from 'moment';
import styles from './index.less';
import {number_format, TimeSpan} from '../../utils/index';
// 声明组件
const TabPane = Tabs.TabPane;
const {RangePicker} = DatePicker;
const dateFormat = 'YYYY/MM/DD';

const data = {
    one: "12",
    oneup: true,
    tow: '11',
    towup: false,
    price: '3331311',
    dayprice: 75,
    data: [
        {title: '工专路 0 号店', num: 304021,leve:1},
        {title: '工专路 1 号店', num: 304021,leve:2},
        {title: '工专路 2 号店', num: 304021,leve:3},
        {title: '工专路 3 号店', num: 304021,leve:4},
        {title: '工专路 4 号店', num: 304021,leve:5},
        {title: '工专路 5 号店', num: 304021,leve:6},
        {title: '工专路 6 号店', num: 304021,leve:7},
    ],
    a: [300, 222, 200, 334, 390, 330, 220, 240, 210, 320, 420, 250],
    b: [300, 222, 200, 334, 390, 330, 220, 240, 210, 320, 420, 250, 210, 200, 500],
    c: [300, 222, 200, 334, 390, 330, 220, 240, 210, 320, 420, 250, 210, 200, 500],
    d: [300, 222, 200, 334, 390, 330, 220, 240, 210, 320, 420, 250],
};


var timestamp = Date.parse(new Date());
//获取15天时间
function time (time) {
    time = TimeSpan(time);
    let string = time.split(" ")[0];
    let day = string.split("-")[2];
    let mon = string.split("-")[1];
    let year = string.split("-")[0];
    let arr = [];
    for (let i = 0; i < 15; i++) {
        let stringDate = year + "-" + mon + "-" + (parseInt(day) - i) + '';
        arr.push(stringDate);
    }
    return arr.reverse();
}

//条形图
const option = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
    },
    grid: {left: 0, top: 0, right: 30, bottom: 0, height: 50, containLabel: true},
    xAxis: [{show: false, type: 'category', data: time(timestamp)}],
    yAxis: [{type: 'value', show: false}],
    series: [{type: 'bar', barWidth: '60%'}],
};

//销售额和访问量公用
const optionTabs = {
    color: ['#3398DB'],
    tooltip: {
        trigger: 'axis',
        axisPointer: { // 坐标轴指示器，坐标轴触发有效
            type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        },
    },

    xAxis: [{type: 'category', data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']}],
    yAxis: [{type: 'value'}],
    series: [{type: 'bar', barWidth: '60%'}],
};

//折线图
const optionOne = {
    color: ['#3398DB'],
    xAxis: {
        type: 'category',
        boundaryGap: false,
        show: false,
        data: time(timestamp),
    },
    tooltip: { //提示框组件
        trigger: 'axis',
    },
    grid: {left: 0,top: 0, right: 0, bottom: 0, height: 50, containLabel: true},
    yAxis: {type: 'value', show: false},
    series: [{type: 'line', areaStyle: {}, smooth: true}],
};


class Pages extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            days: '今日',
            key: "1",
            starDate:TimeSpan(timestamp),
            endDate:TimeSpan(timestamp),
        };
    }

    // 实例化生命周期函数1
    componentWillMount () {
        //判断是否登录
        // this.props.dispatch({type:"dashboard/isloginState"});
    }

    //时间选择
    onChange = (value, dateString) => {
        this.setState({
            starDate: dateString[0],
            endDate: dateString[1],
        });
    };

    //响应式控制
    onChangeWidth = (width, num) => {
        if (num === 1) {
            if (width >= 1200) {
                return 6;
            } else if (width >= 800 && width < 1200) {
                return 12;
            } else {
                return 24;
            }
        } else {
            if (width < 1400 && width > 1200) {
                return true;
            } else {
                return false;
            }
        }
    };
    // 实例化生命周期函数2
    render () {
        const {dispatch, bodyWidth} = this.props;
        const {charts} = this.state;
        const operations = <div className={styles.ExtraContent}>
            {['今日', '本周', '本月', '本年'].map(item => <span key={item} style={{color:this.state.days === item && '#3398DB', cursor:"pointer",
            }} onClick={() => {
                // let weekOfday = moment().format('E');//今天是周几
                let time ={
                    今日:[TimeSpan(timestamp),TimeSpan(timestamp)],
                    本周:[moment().startOf('week').format('YYYY/MM/DD'),moment().endOf('week').format('YYYY/MM/DD')],
                    本月:[moment().startOf('month').format('YYYY/MM/DD'),moment().endOf('month').format('YYYY/MM/DD')],
                    本年:[moment().startOf('year').format('YYYY/MM/DD'),moment().endOf('year').format('YYYY/MM/DD')],
                };
                this.setState({
                    days: item,
                    starDate: time[item][0],
                    endDate: time[item][1],
                });
            }} className={styles.Daypan}>{item}</span>)}
            <RangePicker
                format="YYYY-MM-DD"
                style={{width: 240, marginLeft: 10}}
                value={[moment(this.state.starDate,dateFormat),moment(this.state.endDate,dateFormat)]}
                onChange={this.onChange}
            />
        </div>;
        //响应式span6/12/24
        return (
            <div>
                <div>
                    <Row gutter={24}>
                        <Col className="gutter-row" span={this.onChangeWidth(bodyWidth, 1)}>
                            <div className={styles.card_div}>
                                <span className={styles.spans}>总销售额</span>
                                <h1 style={{marginBottom: !this.onChangeWidth(bodyWidth, 2) ? 20 : -4}}>
                                    <span style={{marginRight: 10}}>¥</span>{number_format(data.price)}
                                </h1>
                                <span className={styles.spans}>
                                    周同比
                                    <span style={{color: "#000", marginLeft: 10}}>{data.one}%</span>
                                    {
                                        data.oneup ? <Icon style={{color: 'red'}} type="arrow-up"/> :
                                            <Icon style={{color: 'green'}} type="arrow-down"/>
                                    }
                                    {this.onChangeWidth(bodyWidth, 2) && <br/>}
                                    <span style={{marginLeft: 10}}>
                                        日环比
                                        <span style={{color: "#000", marginLeft: 10}}>{data.tow}%</span>
                                        {
                                            data.towup ? <Icon style={{color: 'red'}} type="arrow-up"/> :
                                                <Icon style={{color: 'green'}} type="arrow-down"/>
                                        }
                                    </span>
                                </span>
                                <hr />
                                <span className={styles.spans}>
                                    日均销售额
                                    <span style={{margin: 4, color: '#000'}}>¥</span>
                                    <span style={{color: '#000'}}>{number_format(data.dayprice)}</span>
                                </span>
                            </div>
                        </Col>
                        <Col className="gutter-row" span={this.onChangeWidth(bodyWidth, 1)}>
                            <div className={styles.card_div}>
                                <div>
                                    <span className={styles.spans}>访问量</span>
                                    <h1>{number_format(data.price)}</h1>
                                </div>
                                <div className={styles.echarts_div}>
                                    <div style={{height: 28}} ref="Chartone"/>
                                </div>
                                <hr />
                                <span className={styles.spans}>
                                    日访问量
                                    <span style={{color: '#000', marginLeft: 10}}>{number_format(data.dayprice)}</span>
                                </span>
                            </div>
                        </Col>
                        <Col className="gutter-row" span={this.onChangeWidth(bodyWidth, 1)}>
                            <div className={styles.card_div}>
                                <div>
                                    <span className={styles.spans}>支付笔数</span>
                                    <h1>{number_format(data.price)}</h1>
                                </div>
                                <div className={styles.echarts_div}>
                                    <div ref="changtiao" style={{height: 28}}/>
                                </div>
                                <hr />
                                <span className={styles.spans}>
                                    转化率
                                    <span style={{color: '#000', marginLeft: 10}}>{data.dayprice}%</span>
                                </span>
                            </div>
                        </Col>
                        <Col className="gutter-row" span={this.onChangeWidth(bodyWidth, 1)}>
                            <div className={styles.card_div}>
                                <div>
                                    <span className={styles.spans}>运营活动效果</span>
                                    <h1>{data.dayprice}%</h1>
                                </div>
                                <div style={{height: 28, marginLeft: 10}}>
                                    <Progress strokeLinecap="square" percent={data.dayprice}/>
                                </div>

                                <hr />
                                <span className={styles.spans}>
                                    周同比
                                    <span style={{color: "#000", marginLeft: 10}}>{data.one}%</span>
                                    {
                                        data.oneup ? <Icon style={{color: 'red'}} type="arrow-up"/> :
                                            <Icon style={{color: 'green'}} type="arrow-down"/>
                                    }
                                    <span style={{marginLeft: 10}}>
                                        日环比
                                        <span style={{color: "#000", marginLeft: 10}}>{data.tow}%</span>
                                        {
                                            data.towup ? <Icon style={{color: 'red'}} type="arrow-up"/> :
                                                <Icon style={{color: 'green'}} type="arrow-down"/>
                                        }
                                    </span>
                                </span>
                            </div>
                        </Col>
                    </Row>
                </div>
                <div className={styles.TabsDiv}>
                    <Tabs onChange={key => {
                        if (key === '2') {
                            //必须使用定时器才能获取到this.refs.TabPaneTow,否则this.refs.TabPaneTow为undfind
                            setTimeout(() => {
                                let TabPane = echarts.init(this.refs.TabPaneTow);
                                this.refs.TabPaneTow.style.width = (bodyWidth > 800 ? bodyWidth - 800 : bodyWidth - 60) + 'px';
                                optionTabs.series[0].data = data.d;
                                TabPane.setOption(optionTabs);
                                TabPane.resize();
                                this.setState({
                                    key: key,
                                });
                            }, 0);
                        } else {
                            let TabPaneOne = echarts.init(this.refs.TabPaneOne);
                            this.refs.TabPaneOne.style.width = (bodyWidth > 800 ? bodyWidth - 800 : bodyWidth - 60) + 'px';
                            optionTabs.series[0].data = data.a;
                            TabPaneOne.setOption(optionTabs);
                            TabPaneOne.resize();
                            this.setState({
                                key: key,
                            });
                        }
                    }} size="large" defaultActiveKey="1" tabBarExtraContent={bodyWidth > 800 && operations}>
                        <TabPane tab="销售额" key="1">
                            <Row>
                                <Col span={14}>
                                    <div ref="TabPaneOne" style={{height: 420}}/>
                                </Col>
                                <Col span={bodyWidth > 800 ? 8 : 24}>
                                    <p style={{color:"#000"}}>门店访问量排行</p>
                                    <List
                                        size="small"
                                        split='false'
                                        itemLayout="horizontal"
                                        dataSource={data.data}
                                        renderItem={(item, index) => (
                                            <List.Item>
                                                <List.Item.Meta
                                                    avatar={index + 1 > 3 ? <Avatar>{index + 1}</Avatar> :
                                                        <Avatar style={{
                                                            color: '#f56a00',
                                                            backgroundColor: '#fde3cf',
                                                        }}>{item.leve}</Avatar>}
                                                    title={<span>{item.title}</span>}
                                                />
                                                <span>{number_format(item.num)}</span>
                                            </List.Item>
                                        )}
                                    />
                                </Col>
                            </Row>
                        </TabPane>
                        <TabPane tab="访问量" key="2">
                            <Row gutter={24}>
                                <Col span={14}>
                                    <div ref="TabPaneTow" style={{height: 420}}/>
                                </Col>
                                <Col span={bodyWidth > 800 ? 8 : 24}>
                                    <p style={{color:"#000"}}>门店访问量排行</p>
                                    <List
                                        size="small"
                                        split='false'
                                        itemLayout="horizontal"
                                        dataSource={data.data}
                                        renderItem={(item, index) => (
                                            <List.Item>
                                                <List.Item.Meta
                                                    avatar={index + 1 > 3 ? <Avatar>{index + 1}</Avatar> :
                                                        <Avatar style={{
                                                            color: '#f56a00',
                                                            backgroundColor: '#fde3cf',
                                                        }}>{index + 1}</Avatar>}
                                                    title={<span>{item.title}</span>}
                                                />
                                                <span>{number_format(item.num)}</span>
                                            </List.Item>
                                        )}
                                    />
                                </Col>
                            </Row>
                        </TabPane>
                    </Tabs>
                </div>
            </div>
        );
    }

    //生成适配图形
    bodyWidthChange (width, data) {
        //重置bug图表
        if (this.state.key === '2') {
            let TabPane = echarts.init(this.refs.TabPaneTow);
            this.refs.TabPaneTow.style.width = (width > 800 ? width - 800 : width - 60) + 'px';
            optionTabs.series[0].data = data.d;
            TabPane.setOption(optionTabs);
            TabPane.resize();
        } else {
            let TabPaneOne = echarts.init(this.refs.TabPaneOne);
            this.refs.TabPaneOne.style.width = (width > 800 ? width - 800 : width - 60) + 'px';
            optionTabs.series[0].data = data.a;
            TabPaneOne.setOption(optionTabs);
            TabPaneOne.resize();
        }
        //屏幕适配===>必须操作dom才能改变宽度,否则长宽会变成100px ,100px
        switch (this.onChangeWidth(width, 1)) {
        case 6:
            this.refs.changtiao.style.width = (width - 400) / 4 + "px";
            this.refs.Chartone.style.width = (width - 500) / 4 + "px";
            break;
        case 12:
            this.refs.changtiao.style.width = (width - 300) / 2 + "px";
            this.refs.Chartone.style.width = (width - 400) / 2 + "px";
            break;
        case 24:
            this.refs.changtiao.style.width = (width - 50) + 'px';
            this.refs.Chartone.style.width = (width - 100) + 'px';
            break;
        }
        //获取dom
        let myChart = echarts.init(this.refs.changtiao);
        let myChartone = echarts.init(this.refs.Chartone);
        //导入数据
        option.series[0].data = data.b;
        optionOne.series[0].data = data.c;
        //生成图形
        myChart.setOption(option);
        myChartone.setOption(optionOne);
        //重置
        myChart.resize();
        myChartone.resize();
    }

    componentDidMount () {
        this.bodyWidthChange(this.props.bodyWidth, data);
    }

    componentWillReceiveProps (nextProps) {
        if (nextProps.bodyWidth !== this.props.bodyWidth) {
            this.bodyWidthChange(nextProps.bodyWidth, data);
        }
    }
}
export default Pages;
